<template>
    <div>
        <el-row>
            <el-col :span="24">
                <el-form :inline="true" ref="searchForm" :model="searchForm" size="small">
                    <el-form-item label="服务器名" prop="server_name">
                        <el-input size="small" v-model="searchForm.server_name" placeholder="服务器昵称" 
                            class="form-item-unique">
                        </el-input>
                    </el-form-item>

                    <el-form-item label="连接域名" prop="domain">
                        <el-input size="small" v-model="searchForm.domain" placeholder="连接域名" 
                            class="form-item-unique">
                        </el-input>
                    </el-form-item>

                    <el-form-item label="连接用户名" prop="username">
                        <el-input size="small" v-model="searchForm.username" placeholder="连接用户名" 
                            class="form-item-unique">
                        </el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="info" size="small" @click="searchToolChange('searchForm')" 
                            icon="search">查询
                        </el-button>
                        <el-button type="info" size="small"  @click="searchToolReset('searchForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row>
            <el-col>
                <!-- @cellclick="rowCellClick" -->
                <TableProxy :url="mainurl" :param="mainparam" :reload="dataTableReload"  
                    @dbclick="rowDbClick" :page-size="15" :bubble="bubble" >
                    <!-- <el-table-column type="selection" width="55"></el-table-column> -->
                    <el-table-column label="序号" align="center" width="65" type="index"></el-table-column>

                    <el-table-column prop="server_name" label="服务器名称" width="140"></el-table-column>

                    <el-table-column prop="domain" label="连接域名" width="140"></el-table-column>

                    <el-table-column prop="bak_domain" label="备用域名" width="140" show-overflow-tooltip></el-table-column>

                    <el-table-column prop="port" label="连接端口" width="100"></el-table-column>

                    <el-table-column prop="username" label="连接用户名" width="120"></el-table-column>

                    <el-table-column prop="max_num" label="最大链接数" width="100"></el-table-column>

                    <el-table-column prop="overdue" label="过期时间" width="140"></el-table-column>

                    <el-table-column prop="remark" label="备注" width="140" show-overflow-tooltip></el-table-column>

                    <el-table-column prop="created_at" label="创建时间" width="180"></el-table-column>

                    <el-table-column prop="updated_at" label="修改时间" min-width="180"></el-table-column>

                    <el-table-column label="操作" fixed="right" min-width="150" align="center">
                        <template slot-scope="scope">
                            <el-button type="info" size="mini" @click="handleEdit(scope.row)">修改</el-button>
                            <el-button type="danger" size="mini" @click="handleDelete(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>

                    <div slot="buttonbar">
                        <el-button size="small" type="primary" @click="addServer">添加</el-button>
                    </div>
                </TableProxy>
            </el-col>
        </el-row>

        <add name="add-server" :ajax-proxy="ajaxProxy" @submit-success="handleReload"/>
        <edit name="edit-server" :ajax-proxy="ajaxProxy" @submit-success="handleReload"/>
    </div>
</template>

<script>
import PageMix from "@/mix/Page";
import SearchMix from "@/mix/SearchTool";
import DataTable from '@/mix/DataTable';
import ServerBasicAjaxProxy from '@/ajaxProxy/ServerBasicProxy';
import { mapGetters } from 'vuex';
import Add from "./Add";
import Edit from "./Edit";

export default {
    name:'RouterosBasic',
    pageTitle:"ROS列表",
    mixins: [PageMix,SearchMix,DataTable],
    components:{
        Add,
        Edit
    },
    data(){
        return{
            mainparam:"",
            mainurl:ServerBasicAjaxProxy.getUrl(),
            ajaxProxy:ServerBasicAjaxProxy,
            searchForm:{
                server_name:'',
                domain:'',
                username:''
            },
            bubble:null,
            dbRow:null,
        }
    },
    computed:{
        ...mapGetters([
            'getUser'
        ]),
    },
    methods:{
        onSearchChange(param){
            this.mainparam = JSON.stringify(param);
        },
        addServer(){
            this.$modal.show('add-server');
        },
        rowDbClick(row){
            this.dbRow = row;
        },
        getAjaxProxy(){
            return  this.ajaxProxy;
        },
        handleEdit(row){
            this.$modal.show('edit-server',{model:row});
        }
    },
    created(){
        this.$on('search-tool-change', this.onSearchChange);
        this.onSearchChange(this.searchForm);
    }
}
</script>
<style scoped>
    .form-item-unique{
        width: 140px !important;
    }
    .name-input{
        max-width: 170px;
    }
    .name-input-area{
        max-width: 220px;
    }
    .pull-right {
        float: right;
    }

    .input-width {
        width: 120px;
    }
</style>

